<template>
  <div>
    <!-- mobile-menu-area start -->
    <div class="mobile-menu-area">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="mobile-menu">
              <nav id="dropdown">
                <ul>
                  <li>
                    <a class="active1" href="index.html">Home</a>
                    <ul>
                      <li>
                        <a href="index.html">home version 1</a>
                      </li>
                      <li>
                        <a href="index-2.html">home version 2</a>
                      </li>
                      <li>
                        <a href="index-3.html">home version 3</a>
                      </li>
                    </ul>
                  </li>
                  <li class="active1">
                    <a class="active1" href="#">Pages</a>
                    <ul>
                      <li>
                        <a href="about-us.html">about us</a>
                      </li>
                      <li>
                        <a href="cart.html">cart</a>
                      </li>
                      <li>
                        <a href="checkout.html">checkout</a>
                      </li>
                      <li>
                        <a href="wishlist.html">wishlist</a>
                      </li>
                      <li>
                        <a href="login.html">login</a>
                      </li>
                      <li>
                        <a href="register.html">register</a>
                      </li>
                      <li>
                        <a href="contact.html">contact</a>
                      </li>
                      <li>
                        <a href="shop-page.html">shop page</a>
                      </li>
                      <li>
                        <a href="shop-list.html">shop list</a>
                      </li>
                      <li>
                        <a href="single-product.html">single product</a>
                      </li>
                      <li>
                        <a href="404.html">404 page</a>
                      </li>
                    </ul>
                  </li>
                  <li class="active1">
                    <a class="active1" href="#">Blog</a>
                    <ul>
                      <li>
                        <a href="blog-page.html">blog-page</a>
                      </li>
                      <li>
                        <a href="blog-sidebar.html">blog left sidebar</a>
                      </li>
                      <li>
                        <a href="blog-right-sidebar.html">blog right sidebar</a>
                      </li>
                      <li>
                        <a href="blog-details.html">blog-details</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="about-us.html">about us</a>
                  </li>
                  <li>
                    <a href="contact.html">Contacts</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- mobile-menu-area end -->
    <!-- breadcrumbs start -->
    <div class="breadcrumbs-area breadcrumb-bg ptb-100">
      <div class="container">
        <div class="breadcrumbs text-center">
          <h2 class="breadcrumb-title">shop page</h2>
          <ul>
            <li>
              <a class="active" href="index.html">Home</a>
            </li>
            <li>shop</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- breadcrumbs area end -->
    <!-- login area end -->
    <div class="shop-page-area ptb-100">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <div class="blog-sidebar">
              <div class="single-sidebar">
                <h3 class="sidebar-title">Choose Price</h3>
                <div class="price-filter">
                  <div id="slider-range"></div>
                  <div class="price-slider-amount">
                    <input type="text" id="amount" name="price" />
                  </div>
                </div>
              </div>
              <div class="single-sidebar">
                <h3 class="sidebar-title">Category</h3>
                <div class="sidebar-list">
                  <ul>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Dresses (7)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Accessories (9)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Tops (3)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Handbags (1)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Watches (7)</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="single-sidebar">
                <h3 class="sidebar-title">Choose color</h3>
                <div class="sidebar-list">
                  <ul>
                    <li>
                      <input type="checkbox" />
                      <a href="#">red (8)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">green (5)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">blue (2)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">black (6)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Pink (7)</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="single-sidebar">
                <h3 class="sidebar-title">Our Brand</h3>
                <div class="sidebar-list">
                  <ul>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Nike (8)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Religion (2)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Diesel (5)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">Monki (8)</a>
                    </li>
                    <li>
                      <input type="checkbox" />
                      <a href="#">iaan (7)</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="single-sidebar">
                <h3 class="sidebar-title">Popular Tags</h3>
                <div class="tag">
                  <ul>
                    <li>
                      <a href="#">Clothing</a>
                    </li>
                    <li>
                      <a href="#">accessories</a>
                    </li>
                    <li>
                      <a href="#">fashion</a>
                    </li>
                    <li>
                      <a href="#">footwear</a>
                    </li>
                    <li>
                      <a href="#">kid</a>
                    </li>
                    <li>
                      <a href="#">View All Tags</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="single-sidebar">
                <div class="sidebar-img-text">
                  <div class="sidebar-img">
                    <a href="#">
                      <img src="assets/img/shop/2.jpg" alt />
                    </a>
                    <div class="sidebar-text">
                      <h3>save up to</h3>
                      <h2>40% off</h2>
                      <h3>cap</h3>
                      <a href="#">shop now</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-9">
            <div class="blog-wrapper shop-page-mrg">
              <div class="tab-menu-product">
                <div class="tab-menu-sort">
                  <div class="tab-menu">
                    <ul role="tablist">
                      <li class="active">
                        <a href="#grid" data-toggle="tab">
                          <i class="fa fa-th-large"></i>
                          Grid
                        </a>
                      </li>
                      <li>
                        <a href="#list" data-toggle="tab">
                          <i class="fa fa-align-justify"></i>
                          List
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class="tab-sort">
                    <label>Sort By :</label>
                    <select>
                      <option value>Position</option>
                      <option value>Popularity</option>
                      <option value>Price</option>
                      <option value>Average rating</option>
                    </select>
                  </div>
                </div>
                <div class="tab-product">
                  <div class="tab-content">
                    <div class="tab-pane active" id="grid">
                      <div class="row">
                        <!-- 商品循环 -->
                        <div
                          class="col-md-6 col-lg-4 col-sm-6"
                          v-for="(item,index) in wareList"
                          :key="index"
                        >
                          <div class="single-shop mb-40">
                            <div class="shop-img">
                              <a>
                                <img :src="item.src" alt />
                              </a>
                              <div class="shop-quick-view">
                                <a
                                  @click="selectWare(item)"
                                  data-toggle="modal"
                                  data-target="#quick-view"
                                  title="Quick View"
                                >
                                  <i class="pe-7s-look"></i>
                                </a>
                              </div>
                              <div v-if="item.cut!=''" class="price-up-down">
                                <span class="sale-new">{{item.cut}}</span>
                              </div>
                              <div class="button-group">
                                <a href="#" title="Add to Cart">
                                  <i class="pe-7s-cart"></i>
                                  add to cart
                                </a>
                                <a class="wishlist" href="#" title="Wishlist">
                                  <i class="pe-7s-like"></i>
                                  Wishlist
                                </a>
                              </div>
                            </div>

                            <div class="shop-text-all">
                              <div class="title-color fix">
                                <div class="shop-title f-left">
                                  <h3>
                                    <a href="#">{{item.name}}}</a>
                                  </h3>
                                </div>
                                <div class="price f-right">
                                  <span class="new">${{item.price}}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane mb-10" id="list">
                      <div class="row">
                        <div class="col-md-12">
                          <div class="row">
                            <div class="single-shop mb-30">
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="shop-list-left">
                                  <div class="shop-img">
                                    <a href="#">
                                      <img src="assets/img/shop/equal/8.jpg" alt />
                                    </a>
                                    <div class="shop-quick-view">
                                      <a
                                        href="#"
                                        data-toggle="modal"
                                        data-target="#quick-view"
                                        title="Quick View"
                                      >
                                        <i class="pe-7s-look"></i>
                                      </a>
                                    </div>
                                    <div class="price-up-down">
                                      <span class="sale-new">-30%</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-8 col-sm-8 col-xs-12">
                                <div class="shop-list-right">
                                  <div class="shop-list-all">
                                    <div class="shop-list-name">
                                      <h3>
                                        <a href="#">Product Title</a>
                                      </h3>
                                    </div>
                                    <div class="shop-list-rating">
                                      <span class="ratting">
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                      </span>
                                    </div>
                                    <p>
                                      Lorem ipsum dolor sit amet, adipiscing elit. Nam fringilla augue nec est
                                      auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis
                                      justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu,
                                      odio...
                                    </p>
                                    <div class="shop-list-price">
                                      <span class="list-price">
                                        <span class="new">$120.00</span>
                                        <span class="old">$110.00</span>
                                      </span>
                                    </div>
                                    <div class="shop-list-cart">
                                      <div class="shop-group">
                                        <a href="#" title="Add to Cart">
                                          <i class="pe-7s-cart"></i>
                                          add to cart
                                        </a>
                                        <a class="wishlist" href="#" title="Wishlist">
                                          <i class="pe-7s-like"></i>
                                          Wishlist
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="single-shop mb-30">
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="shop-list-left">
                                  <div class="shop-img">
                                    <a href="#">
                                      <img src="assets/img/shop/equal/9.jpg" alt />
                                    </a>
                                    <div class="shop-quick-view">
                                      <a
                                        href="#"
                                        data-toggle="modal"
                                        data-target="#quick-view"
                                        title="Quick View"
                                      >
                                        <i class="pe-7s-look"></i>
                                      </a>
                                    </div>
                                    <div class="price-up-down">
                                      <span class="sale-new">new</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-8 col-sm-8 col-xs-12">
                                <div class="shop-list-right">
                                  <div class="shop-list-all">
                                    <div class="shop-list-name">
                                      <h3>
                                        <a href="#">Product Title</a>
                                      </h3>
                                    </div>
                                    <div class="shop-list-rating">
                                      <span class="ratting">
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                      </span>
                                    </div>
                                    <p>
                                      Lorem ipsum dolor sit amet, adipiscing elit. Nam fringilla augue nec est
                                      auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis
                                      justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu,
                                      odio...
                                    </p>
                                    <div class="shop-list-price">
                                      <span class="list-price">
                                        <span class="new">$160.00</span>
                                      </span>
                                    </div>
                                    <div class="shop-list-cart">
                                      <div class="shop-group">
                                        <a href="#" title="Add to Cart">
                                          <i class="pe-7s-cart"></i>
                                          add to cart
                                        </a>
                                        <a class="wishlist" href="#" title="Wishlist">
                                          <i class="pe-7s-like"></i>
                                          Wishlist
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="single-shop mb-30">
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="shop-list-left">
                                  <div class="shop-img">
                                    <a href="#">
                                      <img src="assets/img/shop/equal/10.jpg" alt />
                                    </a>
                                    <div class="shop-quick-view">
                                      <a
                                        href="#"
                                        data-toggle="modal"
                                        data-target="#quick-view"
                                        title="Quick View"
                                      >
                                        <i class="pe-7s-look"></i>
                                      </a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-8 col-sm-8 col-xs-12">
                                <div class="shop-list-right">
                                  <div class="shop-list-all">
                                    <div class="shop-list-name">
                                      <h3>
                                        <a href="#">Product Title</a>
                                      </h3>
                                    </div>
                                    <div class="shop-list-rating">
                                      <span class="ratting">
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                      </span>
                                    </div>
                                    <p>
                                      Lorem ipsum dolor sit amet, adipiscing elit. Nam fringilla augue nec est
                                      auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis
                                      justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu,
                                      odio...
                                    </p>
                                    <div class="shop-list-price">
                                      <span class="list-price">
                                        <span class="new">$170.00</span>
                                        <span class="old">$190.00</span>
                                      </span>
                                    </div>
                                    <div class="shop-list-cart">
                                      <div class="shop-group">
                                        <a href="#" title="Add to Cart">
                                          <i class="pe-7s-cart"></i>
                                          add to cart
                                        </a>
                                        <a class="wishlist" href="#" title="Wishlist">
                                          <i class="pe-7s-like"></i>
                                          Wishlist
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="single-shop mb-30">
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="shop-list-left">
                                  <div class="shop-img">
                                    <a href="#">
                                      <img src="assets/img/shop/equal/11.jpg" alt />
                                    </a>
                                    <div class="shop-quick-view">
                                      <a
                                        href="#"
                                        data-toggle="modal"
                                        data-target="#quick-view"
                                        title="Quick View"
                                      >
                                        <i class="pe-7s-look"></i>
                                      </a>
                                    </div>
                                    <div class="price-up-down">
                                      <span class="sale-new">sale</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-8 col-sm-8 col-xs-12">
                                <div class="shop-list-right">
                                  <div class="shop-list-all">
                                    <div class="shop-list-name">
                                      <h3>
                                        <a href="#">Product Title</a>
                                      </h3>
                                    </div>
                                    <div class="shop-list-rating">
                                      <span class="ratting">
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                      </span>
                                    </div>
                                    <p>
                                      Lorem ipsum dolor sit amet, adipiscing elit. Nam fringilla augue nec est
                                      auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis
                                      justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu,
                                      odio...
                                    </p>
                                    <div class="shop-list-price">
                                      <span class="list-price">
                                        <span class="new">$150.00</span>
                                      </span>
                                    </div>
                                    <div class="shop-list-cart">
                                      <div class="shop-group">
                                        <a href="#" title="Add to Cart">
                                          <i class="pe-7s-cart"></i>
                                          add to cart
                                        </a>
                                        <a class="wishlist" href="#" title="Wishlist">
                                          <i class="pe-7s-like"></i>
                                          Wishlist
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="single-shop mb-30">
                              <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="shop-list-left">
                                  <div class="shop-img">
                                    <a href="#">
                                      <img src="assets/img/shop/equal/12.jpg" alt />
                                    </a>
                                    <div class="shop-quick-view">
                                      <a
                                        href="#"
                                        data-toggle="modal"
                                        data-target="#quick-view"
                                        title="Quick View"
                                      >
                                        <i class="pe-7s-look"></i>
                                      </a>
                                    </div>
                                    <div class="price-up-down">
                                      <span class="sale-new">-30%</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-8 col-sm-8 col-xs-12">
                                <div class="shop-list-right">
                                  <div class="shop-list-all">
                                    <div class="shop-list-name">
                                      <h3>
                                        <a href="#">Product Title</a>
                                      </h3>
                                    </div>
                                    <div class="shop-list-rating">
                                      <span class="ratting">
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                        <i class="fa fa-star active"></i>
                                      </span>
                                    </div>
                                    <p>
                                      Lorem ipsum dolor sit amet, adipiscing elit. Nam fringilla augue nec est
                                      auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis
                                      justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu,
                                      odio...
                                    </p>
                                    <div class="shop-list-price">
                                      <span class="list-price">
                                        <span class="new">$120.00</span>
                                        <span class="old">$110.00</span>
                                      </span>
                                    </div>
                                    <div class="shop-list-cart">
                                      <div class="shop-group">
                                        <a href="#" title="Add to Cart">
                                          <i class="pe-7s-cart"></i>
                                          add to cart
                                        </a>
                                        <a class="wishlist" href="#" title="Wishlist">
                                          <i class="pe-7s-like"></i>
                                          Wishlist
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="page-pagination text-center">
                      <ul>
                        <li>
                          <a class="active" href="#">1</a>
                        </li>
                        <li>
                          <a href="#">2</a>
                        </li>
                        <li>
                          <a href="#">3</a>
                        </li>
                        <li>
                          <a href="#">4</a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="fa fa-angle-double-right"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- login area end -->
    <!-- quick view start -->
    <div class="quick-view modal fade in" id="quick-view">
      <div class="container">
        <div class="row">
          <div id="view-gallery">
            <div class="col-xs-12">
              <div class="d-table">
                <div class="d-tablecell">
                  <div class="modal-dialog">
                    <div class="main-view modal-content">
                      <div class="modal-footer" data-dismiss="modal">
                        <span>x</span>
                      </div>
                      <div class="row">
                        <div class="col-xs-12 col-sm-5">
                          <div class="quick-image">
                            <div class="single-quick-image tab-content text-center">
                              <div class="tab-pane fade in active" id="sin-pro-1">
                                <img :src="selWare.src" alt />
                              </div>
                              <div class="tab-pane fade in" id="sin-pro-2">
                                <img src="assets/img/shop/q2.jpg" alt />
                              </div>
                              <div class="tab-pane fade in" id="sin-pro-3">
                                <img src="assets/img/shop/q3.jpg" alt />
                              </div>
                              <div class="tab-pane fade in" id="sin-pro-4">
                                <img src="assets/img/shop/q4.jpg" alt />
                              </div>
                            </div>
                            <div class="quick-thumb">
                              <div class="nav nav-tabs">
                                <ul>
                                  <li>
                                    <a data-toggle="tab" href="#sin-pro-1">
                                      <img :src="selWare.src" alt="quick view" />
                                    </a>
                                  </li>
                                  <li>
                                    <a data-toggle="tab" href="#sin-pro-2">
                                      <img src="assets/img/shop/q2.jpg" alt="quick view" />
                                    </a>
                                  </li>
                                  <li>
                                    <a data-toggle="tab" href="#sin-pro-3">
                                      <img src="assets/img/shop/q3.jpg" alt="quick view" />
                                    </a>
                                  </li>
                                  <li>
                                    <a data-toggle="tab" href="#sin-pro-4">
                                      <img src="assets/img/shop/q4.jpg" alt="quick view" />
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-12 col-sm-7">
                          <div class="quick-right">
                            <div class="quick-right-text">
                              <h3>
                                <strong>{{selWare.name}}</strong>
                              </h3>
                              <div class="rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                                <i class="fa fa-star-o"></i>
                                <a>06 Review</a>
                                <a>Add review</a>
                              </div>
                              <div class="amount">
                                <h4>${{selWare.price}}</h4>
                              </div>
                              <p>
                                Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry.
                                Lorem Ipsum has beenin the stand ard dummy text ever
                                since the 1500s, when
                                an unknown printer took a galley of type and scrames
                                bled it make a type
                                specimen book.
                              </p>
                              <div class="row m-p-b">
                                <div class="col-sm-12 col-md-6">
                                  <div class="por-dse responsive-strok clearfix">
                                    <ul>
                                      <li>
                                        <span>Availability</span>
                                        <strong>:</strong>
                                        In stock
                                      </li>
                                      <li>
                                        <span>Condition</span>
                                        <strong>:</strong>
                                        New product
                                      </li>
                                      <li>
                                        <span>Category</span>
                                        <strong>:</strong>
                                        <a>Men</a>
                                        <a>Fashion</a>
                                        <a>Shirt</a>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                                <div class="col-sm-12 col-md-6">
                                  <div class="por-dse color">
                                    <ul>
                                      <li>
                                        <span>color</span>
                                        <strong>:</strong>
                                        <a>Red</a>
                                        <a>Green</a>
                                        <a>Blue</a>
                                        <a>Orange</a>
                                      </li>
                                      <li>
                                        <span>size</span>
                                        <strong>:</strong>
                                        <a>SL</a>
                                        <a>SX</a>
                                        <a>M</a>
                                        <a>XL</a>
                                      </li>
                                      <li>
                                        <span>tag</span>
                                        <strong>:</strong>
                                        <a>Men</a>
                                        <a>Fashion</a>
                                        <a>Shirt</a>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                              <div class="dse-btn">
                                <div class="row">
                                  <div class="col-sm-12 col-md-6">
                                    <div class="por-dse clearfix">
                                      <ul>
                                        <li class="share-btn clearfix">
                                          <span>quantity</span>
                                          <input
										  v-model="selWare.quantity"
                                            class="input-text qty"
                                            name="qty"
                                            maxlength="12"
                                            value="1"
                                            title="Qty"
                                            type="text"
                                          />
                                        </li>
                                        <li class="share-btn clearfix">
                                          <span>share</span>
                                          <a>
                                            <i class="fa fa-facebook"></i>
                                          </a>
                                          <a>
                                            <i class="fa fa-twitter"></i>
                                          </a>
                                          <a>
                                            <i class="fa fa-google-plus"></i>
                                          </a>
                                          <a>
                                            <i class="fa fa-linkedin"></i>
                                          </a>
                                          <a>
                                            <i class="fa fa-instagram"></i>
                                          </a>
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                  <div class="col-sm-12 col-md-6">
                                    <div class="por-dse clearfix responsive-othre">
                                      <ul class="other-btn">
                                        <li>
                                          <a>
                                            <i class="fa fa-heart"></i>
                                          </a>
                                        </li>
                                        <li>
                                          <a>
                                            <i class="fa fa-refresh"></i>
                                          </a>
                                        </li>
                                        <li>
                                          <a>
                                            <i class="fa fa-envelope-o"></i>
                                          </a>
                                        </li>
                                      </ul>
                                    </div>
                                    <div class="por-dse add-to">
                                      <a @click="addCart">add to cart</a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
module.exports = {
  data: function () {
    return {
      wareList: [
        {
          id: "1",
          src: "assets/img/shop/equal/12.jpg",
          name: "Handbag",
          price: "120.00",
          cut: "",
        },
        {
          id: "2",
          src: "assets/img/shop/equal/11.jpg",
          name: "Handbag",
          price: "342.00",
          cut: "-30%",
        },
        {
          id: "3",
          src: "assets/img/shop/equal/10.jpg",
          name: "T-Shirt",
          price: "243.00",
          cut: "new",
        },
        {
          id: "4",
          src: "assets/img/shop/equal/9.jpg",
          name: "Shirt",
          price: "563.00",
          cut: "",
        },
        {
          id: "5",
          src: "assets/img/shop/equal/1.jpg",
          name: "Tops",
          price: "345.00",
          cut: "sale",
        },
        {
          id: "6",
          src: "assets/img/shop/equal/2.jpg",
          name: "Handbag",
          price: "565.00",
          cut: "-40%",
        },
      ],
      selWare: {},
      // shopcart:[]
    };
  },
   computed:{
	  shopcart(){
		  return this.$store.getters.shopcart
	  }
  },
  mounted() {
    (function (a) {
      a("nav#dropdown").meanmenu({
        meanScreenWidth: "767",
        meanMenuContainer: ".mobile-menu",
      });
      a(".grid").imagesLoaded(function () {
        a(".shop-menu").on("click", "button", function () {
          var i = a(this).attr("data-filter");
          h.isotope({
            filter: i,
          });
        });
        var h = a(".grid").isotope({
          itemSelector: ".grid-item",
          percentPosition: true,
          masonry: {
            columnWidth: ".grid-item",
          },
        });
      });
      a(".shop-menu button").on("click", function (h) {
        a(this).siblings(".active").removeClass("active");
        a(this).addClass("active");
        h.preventDefault();
      });
      var f = a("#slider-range");
      var b = a("#amount");
      f.slider({
        range: true,
        min: 40,
        max: 600,
        values: [20, 570],
        slide: function (h, i) {
          b.val("$" + i.values[0] + " - $" + i.values[1]);
        },
      });
      b.val("$" + f.slider("values", 0) + " - $" + f.slider("values", 1));
      a(".testimonial-active").owlCarousel({
        loop: true,
        nav: false,
        navText: [
          '<i class="fa fa-angle-left"></i>',
          '<i class="fa fa-angle-right"></i>',
        ],
        responsive: {
          0: {
            items: 1,
          },
          768: {
            items: 1,
          },
          1000: {
            items: 1,
          },
        },
      });
      a(".video-popup").magnificPopup({
        type: "iframe",
      });
      a(".details-tab").owlCarousel({
        loop: true,
        nav: true,
        items: 4,
        margin: 10,
        navText: [
          '<i class="fa fa-angle-left"></i>',
          '<i class="fa fa-angle-right"></i>',
        ],
        responsive: {
          0: {
            items: 3,
          },
          768: {
            items: 4,
          },
          1000: {
            items: 4,
          },
        },
      });
      a(".product-curosel").owlCarousel({
        loop: true,
        nav: true,
        items: 4,
        navText: [
          '<i class="fa fa-angle-left"></i>',
          '<i class="fa fa-angle-right"></i>',
        ],
        responsive: {
          0: {
            items: 1,
          },
          768: {
            items: 2,
          },
          1000: {
            items: 4,
          },
        },
      });
      a(".special-slider-active").owlCarousel({
        loop: true,
        nav: false,
        autoplay: true,
        items: 4,
        responsive: {
          0: {
            items: 1,
          },
          768: {
            items: 2,
          },
          1000: {
            items: 4,
          },
        },
      });
      a("[data-countdown]").each(function () {
        var h = a(this),
          i = a(this).data("countdown");
        h.countdown(i, function (j) {
          h.html(
            j.strftime(
              '<span class="cdown day">%-D <p>Days</p></span> <span class="cdown hour">%-H <p>Hour</p></span> <span class="cdown minutes">%M <p>Min</p></span class="cdown second"> <span>%S <p>Sec</p></span>'
            )
          );
        });
      });
      var e = a(".stickey");
      var g = a(window);
      g.on("scroll", function () {
        var h = g.scrollTop();
        if (h < 1) {
          e.removeClass("stick");
        } else {
          e.addClass("stick");
        }
      });
      a("#customer").on("click", function () {
        a("#customer-login").slideToggle(900);
      });
      a("#coupon").on("click", function () {
        a("#have-coupon").slideToggle(900);
      });
      a.scrollUp({
        scrollText: '<i class="fa fa-angle-up"></i>',
        easingType: "linear",
        scrollSpeed: 900,
        animation: "fade",
      });
      a(".parallax-window").parallax();
      var c = a("#contact_form");
      c.validate({
        onfocusout: false,
        onkeyup: false,
        rules: {
          name: "required",
          email: {
            required: true,
            email: true,
          },
        },
        errorPlacement: function (i, h) {
          i.insertBefore(h);
        },
        messages: {
          name: "What's your name?",
          email: {
            required: "What's your email?",
            email: "Please, enter a valid email",
          },
        },
        highlight: function (h) {
          a(h).text("").addClass("error");
        },
        success: function (h) {
          h.text("").addClass("valid");
        },
      });
      var d = a("#contact_submit");
      c.submit(function () {
        if (a(this).valid()) {
          d.button("loading");
          var h = a(this).attr("action");
          a.ajax({
            url: h,
            type: "POST",
            data: {
              contactname: a("#contact_name").val(),
              contactemail: a("#contact_email").val(),
              contactmessage: a("#contact_message").val(),
            },
            success: function () {
              d.button("reset");
              d.button("complete");
            },
            error: function () {
              d.button("reset");
              d.button("error");
            },
          });
        } else {
          d.button("reset");
        }
        return false;
      });
    })(jQuery);
  },
  methods: {
    selectWare(item) {
      this.selWare = {...item,quantity:'1'};
	},
	addCart(){
    // this.$store.dispatch('setShopCart',{});
    let idx=this.shopcart.findIndex(m=>m.id===this.selWare.id);
    if(idx>-1){
        this.shopcart[idx].quantity++;
    }
    else{
        this.shopcart.push(this.selWare);
    }
    this.$store.dispatch('setShopCart',this.shopcart);
    alert("成功添加购物车");
	}
  },
};
</script>
